<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="1000" top="100px" destroy-on-close
		@closed="$emit('closed')">
		<el-main class="nopadding">
			<scTable ref="table" :data="channels.channels" :params="params" orderBy="sort" row-key="id"
				@selection-change="selectionChange" stripe :hideDo="true" hidePagination>
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<el-table-column label="通道名" prop="name">
				</el-table-column>
				<el-table-column label="通道号" prop="channelId">
				</el-table-column>
				<el-table-column label="在线状态" prop="online">
					<template #default="scope">
						<div v-if="scope.row.online">
							<sc-status-indicator type="success"></sc-status-indicator> 在线
						</div>
						<div v-if="!scope.row.online">
							<sc-status-indicator pulse type="danger"></sc-status-indicator> 离线
						</div>
						<!-- <el-icon v-if="scope.row.online" style="color: #67C23A;"><el-icon-circle-check-filled /></el-icon>
						<el-icon v-else style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon> -->
					</template>
				</el-table-column>
				<el-table-column label="最后上线时间" prop="lastOnLine">
				</el-table-column>
				<el-table-column label="最后离线时间" prop="lastOffLine">
				</el-table-column>
				<el-table-column label="离线原因" prop="offlineReasonType">
				</el-table-column>
			</scTable>
		</el-main>
		<template #footer>
			<el-button @click="visible=false">返 回</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				showAMap: false,
				mode: "add",
				titleMap: {
					add: '查看通道',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				channelList: [],
				//表单数据
				FormData: {
					store: {},
					unit: {},
					sn: null,
					devStatus: true,
					functions: null,
					gb28181: false,
					algorithm: 'md5'
				},
				channels:{},
				//验证规则
				rules: {
					gb28181: [{
						required: true,
						message: '请选择设备类型'
					}],
					store: [{
						required: true,
						message: '请选择店面'
					}],
					sn: [{
						required: true,
						message: '请填写SN'
					}],
					name: [{
						required: true,
						message: '请填写设备名称'
					}],
					code: [{
						required: true,
						message: '请填写验证码'
					}],
					functions: [{
						required: true,
						message: '请填写相机功能'
					}],
					devStatus: [{
						required: true,
						message: '请选择状态'
					}],
				},
				unitList: [],
				userInfo: {}
			}
		},
		created() {
			this.userInfo = this.$TOOL.data.get("USER_INFO")
		},
		mounted() {},
		methods: {
			//新增等级
			addLevel() {
				let index = String(this.channelList.length + 1)
				if (this.channelList.length == 24) {
					this.$message('最多只能新增24个通道！')
				} else {
					this.channelList.push({
						name: index,
						tag: '通道' + index,
					})
				}
			},
			// 删除等级
			deleteLevel(item, index) {
				this.channelList.splice(index, 1)
			},
			//显示
			open(mode = 'add') {
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			async submit() {
				var valid = await this.$refs.dialogForm.validate().catch(() => {})
				if (!valid) {
					return false
				}
				this.isSaveing = true
				this.channelList.forEach(item => {
					if (item.name == '') {
						this.$message('请输入通道名称')
						return
					}
					if (item.tag == '') {
						this.$message('请输入通道别名')
						return
					}
				})
				delete this.FormData.createByName
				console.log(this.FormData)
				let data = {
					store: {
						id: this.FormData.store.id
					},
					unit: {
						id: this.FormData.unit.id
					},
					name: this.FormData.name,
					sn: this.FormData.sn,
					code: this.FormData.code,
					functions: this.FormData.functions,
					devStatus: this.FormData.devStatus,
					username: this.FormData.username,
					password: this.FormData.password,
					description: this.FormData.description,
					algorithm: this.FormData.algorithm,
					gb28181: this.FormData.gb28181,
				}
				if (this.FormData.id) {
					data.id = this.FormData.id
				}
				if (this.channelList.length) {
					data.channels = this.channelList
				}
				const res = await this.$API.api.cam.save.post(data)
				this.isSaveing = false;
				if (res.code == 200) {
					this.$emit('success', this.FormData, this.mode)
					this.visible = false;
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {
						type: 'error'
					})
				}
			},
			//表单注入数据
			setData(data) {
				// this.FormData.id = data.id
				// this.FormData.name = data.name
				// this.FormData.store.name = data.store.name
				// this.FormData.store.id = data.store.id
				// this.FormData.unit.name = data.unitName
				// this.FormData.unit.id = data.unitId
				// this.FormData.code = data.code
				// this.FormData.sn = data.sn
				// this.FormData.functions = data.functions
				// this.FormData.devStatus = data.devStatus
				// this.FormData.gb28181 = data.gb28181
				// if (data.channels.length) {
				// 	data.channels.forEach(item => {
				// 		this.channelList.push({
				// 			name: item.name,
				// 			tag: item.tag
				// 		})
				// 	})
				// }
				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				Object.assign(this.channels, data)
				console.log(this.channels)
			}
		}
	}
</script>

<style>
</style>
